<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <style>
    [id^="instance"] .demo {
      width: 100%;
      height: 100%;
    }

    #instance,
    #instance2 {
      width: 60%;
      height: 400px;
      margin: 0 auto 200px;
    }

    #instance canvas,
    #instance2 canvas {
      border-radius: 0 !important;
    }

    #instance .btn {
      border-color: #FFC107;
      background-color: #FFC107;
    }

    #instance2 {
      position: relative;
    }

    #progress {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    #instance3 {
      width: 120px;
      height: 120px;
      margin: 50px auto;
      position: fixed;
      top: 0;
      left: 20px;
    }

    #instance3 .demo {
      border-color: #ececec;
      border-radius: 50%;
    }

    @media all and (max-width: 1000px) {
      #instance2 .demo {
        height: 300px;
      }
    }
  </style>
</head>
<body>
<div id="instance">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<div id="instance2">
  <div class="demo"></div>
  <div id="progress">loading 0%</div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<div id="instance3">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<script src="js/event.js"></script>
<script>
  (function() {
    const instance = document.getElementById('instance')
    const btn = instance.querySelector('.btn')
    const demo = instance.querySelector('.demo')
    const loading = new JParticles.WaveLoading(demo, {
      num: 2,
      font: 'normal 900 30px Arial',
      textFormatter: '加载中...%d%',
      textColor: '#ffc71f',
      fillColor: ['#FFC107', 'yellowgreen'],
      offsetLeft: [0, 2],
      crestHeight: 8,
      crestCount: 3,
      speed: 0.25,
      duration: 3000,
      easing: 'linear',
    })

    loading.onProgress(function(progress) {
      console.log('progress: ', progress)
      
      loading.setOptions({
        textFormatter: `loading...${parseInt(progress * 10)}‰`,
      })

      // 如果进度大于 60，设置文本颜色为白色
      if (progress >= 60) {
        loading.setOptions({
          textColor: '#fff',
          offsetLeft: [20, 25],
          crestHeight: 20,
          speed: 0.2,
        })
      }
    })

    // 主动完成，加速到达 100%
    btn.addEventListener('click', function() {
      loading.done()
    })
  })();


  (function() {
    const instance = document.getElementById('instance2')
    const $progress = instance.querySelector('#progress')
    const btn = instance.querySelector('.btn')
    const demo = instance.querySelector('.demo')
    const loading = new JParticles.WaveLoading(demo, {
      textFormatter: '',
      crestHeight: 8,
      crestCount: 2,
      resize: false,
    })

    loading.onProgress(function(val) {
      $progress.innerHTML = `loading ${Math.floor(val)}%`
    })

    btn.addEventListener('click', function() {
      loading.done()
    })
  })();

  // 小字体测试
  (function() {
    const instance = document.getElementById('instance3')
    const btn = instance.querySelector('.btn')
    const demo = instance.querySelector('.demo')
    const loading = new JParticles.WaveLoading(demo, {
      font: '14px Arial',
      speed: 0.2,
      crestCount: 1,
      resize: false,
    })

    let startTime = Date.now()

    loading.onProgress(function(progress) {
      if (Date.now() - startTime > 1000) {
        startTime = Date.now()
        const reverse = Math.random() > 0.5
        loading.setOptions({
          font: Math.random() > 0.5 ? '12px Arial' : '14px Arial',
          textColor: reverse ? 'black' : 'yellow',
          textFormatter: reverse ? 'loading %d%' : '加载中 %d%',
          borderRadius: reverse ? '50%' : '',
          opacity: Math.random() > 0.5 ? 0.5 : 1,
        })
      }
    })

    btn.addEventListener('click', function() {
      loading.done()
    })
  })()
</script>
</body>
</html>
